<template>
    <div class="base-width header">
        <div>
            <div class="left">
                <img class="logo" @click="$router.push('/home/index')" src="../assets/img/48.png" alt="">
                <div>
                    <span>西安</span>
                    <div class="sj"></div>
                </div>
            </div>
            <div class="s">
                <input class="search" type="text" placeholder="搜索明星、演出、场馆">
                <button>搜索</button>
                <!-- <span></span> -->
            </div>
            <div class="right" @click="doLogin">
                <i></i>
                <a href="javascript:;" v-if="!token">登录/注册</a>
                <a href="javascript:;" @click="$router.push('/user/wddd1')" v-else>{{ userInfo.phone }}</a>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';

export default {
    computed: {
        ...mapState(['isShow', 'token', 'userInfo'])
    },
    methods: {
        ...mapMutations(['setIsShow']),
        doLogin() {
            if (this.token) {
                return;
            } else {
                this.setIsShow(true);
            }
        }
    },
    mounted() {
    },

}
</script>

<style lang="scss" scoped>
.logo {
    cursor: pointer;
}

.base-width.header {
    width: 1160px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    flex-direction: column;

    >div {
        display: flex;
        align-items: center;
        justify-content: space-between;

        >.left {
            display: flex;
            width: 25%;
            align-items: center;

            >img {
                object-fit: cover;
                display: inline-block;
                width: 150px;
                height: 70px;
            }

            >div {
                align-items: center;
                justify-content: space-between;
                position: relative;

                >span {
                    font-size: 20px;
                    padding: 0 10px 0 25px;
                    font-weight: 500;
                    color: #323038;
                }

                >.sj {
                    position: absolute;
                    left: 73px;
                    top: 13px;
                    width: 0;
                    height: 0;
                    border-top: 5px solid #323038;
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                }
            }

        }

        >.s {
            width: 40%;
            position: relative;
            margin-right: 200px;
            padding: 0;

            >.search {
                display: inline-block;
                line-height: 36px;
                height: 36px;
                width: 100%;
                outline: 0;
                padding-left: 30px;
                border-radius: 22px;
                text-shadow: 0 0 0 #747a98;
                -webkit-text-fill-color: transparent;
                background-color: #fff;
                border: 2px solid #ff4381;

            }

            >button {
                position: absolute;
                right: -35px;
                top: 1px;
                border: 0;
                outline: 0;
                color: #fff;
                width: 100px;
                height: 39px;
                line-height: 39px;
                border-radius: 0 20px 20px 0;
                background: linear-gradient(to left, #ff4655, #ff4287);
                font-size: 14px;
                font-weight: 700;
            }
        }

        >.right {
            display: flex;
            widows: 25%;
            align-items: center;

            >i {
                background-image: url(../assets/img/67.png);
                background-position: -392px -197px;
                width: 24px;
                height: 24px;
                vertical-align: middle;
            }

            >a {
                text-decoration: none;
                color: #777;
                padding: 5px 0 5px 5px;
            }

            &:hover {
                >a {
                    color: red;
                }

                >i {
                    background-position: -420px -197px;
                }
            }

        }
    }
}
</style>